<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ngAnimate/animate.js#L233" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ngAnimate/animate.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$animate</code>
<div><span class="hint">service in module <code ng:non-bindable="">ngAnimate</code>
</span>
</div>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><div class="nganimate-animate-page"><p>The <code>$animate</code> service provides animation detection support while performing DOM operations (enter, leave and move)
as well as during addClass and removeClass operations. When any of these operations are run, the $animate service
will examine any JavaScript-defined animations (which are defined by using the $animateProvider provider object)
as well as any CSS-defined animations against the CSS classes present on the element once the DOM operation is run.</p>
<p>The <code>$animate</code> service is used behind the scenes with pre-existing directives and animation with these directives
will work out of the box without any extra configuration.</p>
<p>Requires the <a href="api/ngAnimate"><code>ngAnimate</code></a> module to be installed.</p>
<p>Please visit the <a href="api/ngAnimate"><code>ngAnimate</code></a> module overview page learn more about how to use animations in your application.</p>
</div></div>
<h2 id="Dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$timeout,">$timeout,</a></code>
<div class="nganimate-animate-page"><p>$sniffer, $rootElement</p>
</div></li>
</ul>
<div class="member method"><h2 id="Methods">Methods</h2>
<ul class="methods"><li><h3 id="addClass">addClass(element, className, done)</h3>
<div class="addclass"><div class="nganimate-animate-addclass-page"><p>Triggers a custom animation event based off the className variable and then attaches the className value to the element as a CSS class.
Unlike the other animation methods, the animate service will suffix the className value with <a href="#" class="label type-hint type-hint--add">-add</a> in order to provide
the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if no CSS transitions
or keyframes are defined on the -add CSS class).</p>
<p>Below is a breakdown of each step that occurs during addClass animation:</p>
<table>
<thead>
<tr>
<th>Animation Step</th>
<th>What the element class attribute looks like</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. $animate.addClass(element, &#39;super&#39;) is called</td>
<td>class=&quot;&quot;</td>
</tr>
<tr>
<td>2. $animate runs any JavaScript-defined animations on the element</td>
<td>class=&quot;&quot;</td>
</tr>
<tr>
<td>3. the .super-add class is added to the element</td>
<td>class=&quot;super-add&quot;</td>
</tr>
<tr>
<td>4. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
<td>class=&quot;super-add&quot;</td>
</tr>
<tr>
<td>5. the .super-add-active class is added (this triggers the CSS transition/animation)</td>
<td>class=&quot;super-add super-add-active&quot;</td>
</tr>
<tr>
<td>6. $animate waits for X milliseconds for the animation to complete</td>
<td>class=&quot;super-add super-add-active&quot;</td>
</tr>
<tr>
<td>7. The animation ends and both CSS classes are removed from the element</td>
<td>class=&quot;&quot;</td>
</tr>
<tr>
<td>8. The super class is added to the element</td>
<td>class=&quot;super&quot;</td>
</tr>
<tr>
<td>9. The done() callback is fired (if provided)</td>
<td>class=&quot;super&quot;</td>
</tr>
</tbody>
</table>
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-addclass-page"><p>the element that will be animated</p>
</div></td></tr><tr><td>className</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="nganimate-animate-addclass-page"><p>the CSS class that will be animated and then attached to the element</p>
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-addclass-page"><p>callback function that will be called once the animation is complete</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="enabled">enabled(value)</h3>
<div class="enabled"><div class="nganimate-animate-enabled-page"><p>Globally enables/disables animations.</p>
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>value <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="nganimate-animate-enabled-page"><p>If provided then set the animation on or off.</p>
</div></td></tr></tbody></table><h5 id="returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="nganimate-animate-enabled-page"><p>Current animation state.</p>
</div></td></tr></table></div>
</li>
<li><h3 id="enter">enter(element, parent, after, done)</h3>
<div class="enter"><div class="nganimate-animate-enter-page"><p>Appends the element to the parent element that resides in the document and then runs the enter animation. Once
the animation is started, the following CSS classes will be present on the element for the duration of the animation:</p>
<p>Below is a breakdown of each step that occurs during enter animation:</p>
<table>
<thead>
<tr>
<th>Animation Step</th>
<th>What the element class attribute looks like</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. $animate.enter(...) is called</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>2. element is inserted into the parent element or beside the after element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>3. $animate runs any JavaScript-defined animations on the element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>4. the .ng-enter class is added to the element</td>
<td>class=&quot;my-animation ng-enter&quot;</td>
</tr>
<tr>
<td>5. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
<td>class=&quot;my-animation ng-enter&quot;</td>
</tr>
<tr>
<td>6. the .ng-enter-active class is added (this triggers the CSS transition/animation)</td>
<td>class=&quot;my-animation ng-enter ng-enter-active&quot;</td>
</tr>
<tr>
<td>7. $animate waits for X milliseconds for the animation to complete</td>
<td>class=&quot;my-animation ng-enter ng-enter-active&quot;</td>
</tr>
<tr>
<td>8. The animation ends and both CSS classes are removed from the element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>9. The done() callback is fired (if provided)</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
</tbody>
</table>
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-enter-page"><p>the element that will be the focus of the enter animation</p>
</div></td></tr><tr><td>parent</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-enter-page"><p>the parent element of the element that will be the focus of the enter animation</p>
</div></td></tr><tr><td>after</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-enter-page"><p>the sibling element (which is the previous element) of the element that will be the focus of the enter animation</p>
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-enter-page"><p>callback function that will be called once the animation is complete</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="leave">leave(element, done)</h3>
<div class="leave"><div class="nganimate-animate-leave-page"><p>Runs the leave animation operation and, upon completion, removes the element from the DOM. Once
the animation is started, the following CSS classes will be added for the duration of the animation:</p>
<p>Below is a breakdown of each step that occurs during enter animation:</p>
<table>
<thead>
<tr>
<th>Animation Step</th>
<th>What the element class attribute looks like</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. $animate.leave(...) is called</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>2. $animate runs any JavaScript-defined animations on the element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>3. the .ng-leave class is added to the element</td>
<td>class=&quot;my-animation ng-leave&quot;</td>
</tr>
<tr>
<td>4. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
<td>class=&quot;my-animation ng-leave&quot;</td>
</tr>
<tr>
<td>5. the .ng-leave-active class is added (this triggers the CSS transition/animation)</td>
<td>class=&quot;my-animation ng-leave ng-leave-active</td>
</tr>
<tr>
<td>6. $animate waits for X milliseconds for the animation to complete</td>
<td>class=&quot;my-animation ng-leave ng-leave-active</td>
</tr>
<tr>
<td>7. The animation ends and both CSS classes are removed from the element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>8. The element is removed from the DOM</td>
<td>...</td>
</tr>
<tr>
<td>9. The done() callback is fired (if provided)</td>
<td>...</td>
</tr>
</tbody>
</table>
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-leave-page"><p>the element that will be the focus of the leave animation</p>
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-leave-page"><p>callback function that will be called once the animation is complete</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="move">move(element, parent, after, done)</h3>
<div class="move"><div class="nganimate-animate-move-page"><p>Fires the move DOM operation. Just before the animation starts, the animate service will either append it into the parent container or
add the element directly after the after element if present. Then the move animation will be run. Once
the animation is started, the following CSS classes will be added for the duration of the animation:</p>
<p>Below is a breakdown of each step that occurs during move animation:</p>
<table>
<thead>
<tr>
<th>Animation Step</th>
<th>What the element class attribute looks like</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. $animate.move(...) is called</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>2. element is moved into the parent element or beside the after element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>3. $animate runs any JavaScript-defined animations on the element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>4. the .ng-move class is added to the element</td>
<td>class=&quot;my-animation ng-move&quot;</td>
</tr>
<tr>
<td>5. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
<td>class=&quot;my-animation ng-move&quot;</td>
</tr>
<tr>
<td>6. the .ng-move-active class is added (this triggers the CSS transition/animation)</td>
<td>class=&quot;my-animation ng-move ng-move-active&quot;</td>
</tr>
<tr>
<td>7. $animate waits for X milliseconds for the animation to complete</td>
<td>class=&quot;my-animation ng-move ng-move-active&quot;</td>
</tr>
<tr>
<td>8. The animation ends and both CSS classes are removed from the element</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
<tr>
<td>9. The done() callback is fired (if provided)</td>
<td>class=&quot;my-animation&quot;</td>
</tr>
</tbody>
</table>
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-move-page"><p>the element that will be the focus of the move animation</p>
</div></td></tr><tr><td>parent</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-move-page"><p>the parent element of the element that will be the focus of the move animation</p>
</div></td></tr><tr><td>after</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-move-page"><p>the sibling element (which is the previous element) of the element that will be the focus of the move animation</p>
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-move-page"><p>callback function that will be called once the animation is complete</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="removeClass">removeClass(element, className, done)</h3>
<div class="removeclass"><div class="nganimate-animate-removeclass-page"><p>Triggers a custom animation event based off the className variable and then removes the CSS class provided by the className value
from the element. Unlike the other animation methods, the animate service will suffix the className value with <a href="#" class="label type-hint type-hint--remove">-remove</a> in
order to provide the animate service the setup and active CSS classes in order to trigger the animation (this will be skipped if
no CSS transitions or keyframes are defined on the -remove CSS class).</p>
<p>Below is a breakdown of each step that occurs during removeClass animation:</p>
<table>
<thead>
<tr>
<th>Animation Step</th>
<th>What the element class attribute looks like</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. $animate.removeClass(element, &#39;super&#39;) is called</td>
<td>class=&quot;super&quot;</td>
</tr>
<tr>
<td>2. $animate runs any JavaScript-defined animations on the element</td>
<td>class=&quot;super&quot;</td>
</tr>
<tr>
<td>3. the .super-remove class is added to the element</td>
<td>class=&quot;super super-remove&quot;</td>
</tr>
<tr>
<td>4. $animate scans the element styles to get the CSS transition/animation duration and delay</td>
<td>class=&quot;super super-remove&quot;</td>
</tr>
<tr>
<td>5. the .super-remove-active class is added (this triggers the CSS transition/animation)</td>
<td>class=&quot;super super-remove super-remove-active&quot;</td>
</tr>
<tr>
<td>6. $animate waits for X milliseconds for the animation to complete</td>
<td>class=&quot;super super-remove super-remove-active&quot;</td>
</tr>
<tr>
<td>7. The animation ends and both CSS all three classes are removed from the element</td>
<td>class=&quot;&quot;</td>
</tr>
<tr>
<td>8. The done() callback is fired (if provided)</td>
<td>class=&quot;&quot;</td>
</tr>
</tbody>
</table>
</div><h5 id="parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>element</td><td><a href="" class="label type-hint type-hint-jquery">jQuery/jqLite element</a></td><td><div class="nganimate-animate-removeclass-page"><p>the element that will be animated</p>
</div></td></tr><tr><td>className</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="nganimate-animate-removeclass-page"><p>the CSS class that will be animated and then removed from the element</p>
</div></td></tr><tr><td>done <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="nganimate-animate-removeclass-page"><p>callback function that will be called once the animation is complete</p>
</div></td></tr></tbody></table></div>
</li>
</ul>
</div>
</div>
